<template>
	<view class="e-content">
		<view class="bg-size">
			<view class="nuter">
				<view :class="target==0?'active':''" @click="setIndex" data-index="0">
				 		帮我送
				 </view>
				<view :class="target==1?'active':''" @click="setIndex" data-index="1">
						帮我取
				 </view>
			</view>
			<swiper 
			:duration="500" 
			:current="thisindex"  
			:data-index='thisindex' 
			@change="toggle"
			circular>
				<swiper-item>
					<!-- 按顺序对应第一个的内容 -->
					<u-row customStyle="margin: 8rpx;padding: 40rpx 4rpx;background-color: #f3f5f7;border-radius: 10rpx;">
						<u-col span="6" customStyle="margin-left:6rpx;">
							<u-icon size="24" name="../../static/icon/fetch.png" label="您要从哪里取件" space="10" labelSize="16" labelColor="#333"></u-icon>
						</u-col>
						<u-col span="1" offset="3"><text style="margin-left: 20rpx;">|</text></u-col>
						<u-col span="2" ><u--text color="rgb(89 89 89)" text="常用"></u--text></u-col>
					</u-row>
					<u-row customStyle="margin: 8rpx;padding: 40rpx 4rpx;background-color: #f3f5f7;border-radius: 10rpx;">
						<u-col span="6" customStyle="margin-left:6rpx;">
							<u-icon size="24" name="../../static/icon/collect.png" label="您要送到哪里" space="10" labelSize="16" labelColor="#333"></u-icon>
						</u-col>
						<u-col span="1" offset="3"><text style="margin-left: 20rpx;">|</text></u-col>
						<u-col span="2" ><u--text color="rgb(89 89 89)" text="常用"></u--text></u-col>
					</u-row>
				</swiper-item>
				<swiper-item>
					<!-- 按顺序对应第二个的内容 -->
					<u-row customStyle="margin: 8rpx;padding: 40rpx 4rpx;background-color: #f3f5f7;border-radius: 10rpx;">
						<u-col span="6" customStyle="margin-left:6rpx;">
							<u-icon size="24" name="../../static/icon/fetch.png" label="您要从哪里取件" space="10" labelSize="16" labelColor="#333"></u-icon>
						</u-col>
						<u-col span="1" offset="3"><text style="margin-left: 20rpx;">|</text></u-col>
						<u-col span="2" ><u--text color="rgb(89 89 89)" text="常用"></u--text></u-col>
					</u-row>
					<u-row customStyle="margin: 8rpx;padding: 40rpx 4rpx;background-color: #f3f5f7;border-radius: 10rpx;">
						<u-col span="6" customStyle="margin-left:6rpx;">
							<u-icon size="24" name="../../static/icon/collect.png" label="您要送到哪里" space="10" labelSize="16" labelColor="#333"></u-icon>
						</u-col>
						<u-col span="1" offset="3"><text style="margin-left: 20rpx;">|</text></u-col>
						<u-col span="2" ><u--text color="rgb(89 89 89)" text="常用"></u--text></u-col>
					</u-row>
				</swiper-item>
				
			</swiper>
		</view>
		<view class="bg-size">
			<u-row customStyle="margin: 8rpx;padding: 20rpx 4rpx;">
				<u-col span="4"><u--text text="取送件流程" bold></u--text></u-col>
				<u-col span="2" offset="5"><u--text color="rgb(163 163 163)" text="常见问题"></u--text></u-col>
				<u-col span="1"><u-icon name="arrow-right"></u-icon></u-col>
			</u-row>
			<view style="padding: 20rpx 8rpx;">
				<u--text color="rgb(163 163 163)" text="1.填取送信息>2.支付跑腿费>3.骑士取送件>4.签收完成"></u--text>
			</view>
		</view>
		
		<u-tabbar
			@change="change1"
			:value="value"
			:border="true"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
			<u-tabbar-item text="订单" icon="order"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		// 只要上面的选项跟下面的swiper-item个数相同，直接加上面的个数，下面的会自动对应显示，很简便，拿来就能用
		data() {
			return {
				// 当前样式
				target:0,
				// 当前item位置
				thisindex:0,
				albumWidth: 0,
				value: 0,
			}
		},
		methods: {
			// 切换触发的事件
			toggle(e){
				let index = e.detail.current
				this.target = index
			},
			// 点击nav控制下面的展示
			setIndex(e){
				let index = e.currentTarget.dataset.index
				this.thisindex = index
				console.log(this.thisindex)
			},
			change1(e) {
				this.value = e;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.e-content {
		padding-top: 20rpx;
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.bg-size {
			margin: 12rpx;
			padding: 20rpx 4rpx;
			background-color: #fff;
			border-radius: 10rpx;
		}
	}
	.nuter{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;
		view{
			flex: 1;
			font-size: 26rpx;
			text-align: center;
			transition: all 0.5s ease .1s;
			/* background-color: #f0f0f0; */
		}
	}
	.active{
		box-sizing: border-box;
		color: #007AFF;
		border-bottom: 4rpx solid #00aaff;
		/* background-color: #f3ffff; */
		border-radius: 10rpx;
		/* box-shadow: 3px 3px 5px #888888; */
	}
	swiper{
		min-height: 200px;
	}
	swiper-item{
		width: 100%;
		overflow: hidden;
		padding: 30rpx 30rpx;
		overflow-y: scroll;
		box-sizing: border-box;
		/* background-color: red; */
	}
	
</style>
